<html class="no-js" lang="en">

<head>
   <meta charset="utf-8" />

   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
   <meta name="format-detection" content="telephone=no" />

   
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=geometry"></script>
<script type="text/javascript"> 

<?php
	$endlat = $_REQUEST['endlat'];
	$endlng = $_REQUEST['endlng'];

echo "var hospital = new google.maps.LatLng($endlat, $endlng);";
?>

var browserSupportFlag =  new Boolean();
var map;
var infowindow = new google.maps.InfoWindow();
  
var directionDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
    var myOptions = {
      zoom: 15,
      center: hospital,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
		
	var marker1 = new google.maps.Marker({
			position: hospital, 
			map: map
	});
	var infowindow1 = new google.maps.InfoWindow({ 
		content: "This is Hospital."
	});
	google.maps.event.addListener(marker1, 'click', function() {
			infowindow1.open(map,marker1);
	});
	
	if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
	
		currentLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
		directionsDisplay = new google.maps.DirectionsRenderer();
		directionsDisplay.setMap(map);
		
		var marker2 = new google.maps.Marker({
			position: currentLocation, 
			map: map
		});
		var infowindow2 = new google.maps.InfoWindow({ 
			content: "This is your current location."
		});
		google.maps.event.addListener(marker2, 'click', function() {
				infowindow2.open(map,marker2);
		});
		
		var request = {
			origin: currentLocation, 
			destination: hospital,
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		};
		directionsService.route(request, function(response, status) {
			  if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
			  }
		});
			
		
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else if (google.gears) {
    // Try Google Gears Geolocation
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else {
    // Browser doesn't support Geolocation
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
}

</script>

</head>

<body onload="initialize()">
	<!--<div>
		<b>Mode of Travel: </b>
		<select id="mode" onchange="calcRoute();">
		  <option value="DRIVING">Driving</option>
		  <option value="WALKING">Walking</option>
		  <option value="BICYCLING">Bicycling</option>
		</select>
	</div>-->
	<div id="map_canvas"></div>
</body>

</html>